<template>
  <div id="app">
    <p>用 jQuery 拿到我右边这个小哥们: <input type="text"
             id="abc" /> <button @click.stop="useNormalJquery">jQuery,非常传统!!</button></p>

    <hr>

    <p>使用 jQuery 组件的方式去拿到右边的这个小哥们: <input type="text"
             id="rightText" /> <button @click.stop="useModernJquery">jQuery 组件化,非常现代!!!</button> </p>
    <hr>

    <p>webpack & externals & import & cdn <input type="text"
             id="rightText2" /> <button @click.stop="useExternals">夹生,,尬的一批的 externals 方式...</button> </p>
  </div>
</template>

<script>

// 导入基于webpack组件化打包环境的 jquery
import webpackJquery from 'jquery'

import HeheDa from 'CaoNiDaYe'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    // 在基于 webpack 打包的模板文件 index.html 
    // 使用常规的 cdn 的方式导入 jQuery.js 文件的方式.
    useNormalJquery () {
      // 由于,这里的按钮点击事件,属于回调函数.
      // 当执行回调函数的时候,jQuery 早就挂载到 window 对象上了.

      jQuery('#abc').val('cdn ---> 使用 vue 了不起啊!! 我 jQuery 不一样可以用传统的方式去调用!!呵呵!')
    },

    // 使用 组件化的方式去使用 jQuery.  first -> npm install --save jQuery
    useModernJquery () {
      webpackJquery('#rightText').val('npm i --save jquery ---> 使用组件化的模式使用 jQuery 就是这么厉害!!不服啊!!')
    },

    // cdn 导入 , import 使用 , webpack 配置 externals
    useExternals () {
      HeheDa('#rightText2').val('cdn先在 index.html 引入, webpack.config.js 配置一下 externals,,, 在使用 import 方式来调用..烦不烦???')
    }
  }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

input {
  width: 700px;
  height: 40px;
  padding: 5px 10px;
}
</style>
